A process component communicates to the user the progress of a particular process.
This component importantly changes role depending on what state it is in. If a Path comes with Stage Coaching information, this pattern lends itself perfectly to being a traditional Tab Set. As you navigate the Path Stages, it’s associated content changes with it.
On the other hand, if a Path doesn’t have Path Stage Coaching information, we can no longer use the Tab Set role, as we would effectively be misleading our users because each Tab has no associated content. This may lead to users trying to find absent content. In this situation, this component is much more suited to being a Listbox component.
The markup structure is identical, just some attributes change their values.
|DOM Node||Without Coaching||With Coaching|
Notable Attributes - Without Coaching
aria-orientation="horizontal"should be applied to the
slds-path__navelement to indicate to the screen reader to use horizontal navigation
aria-selected="true"should be applied to the selected Stage of the Path as you navigate through the Stages
Notable Attributes - With Coaching
- When the Path Stage Coaching is not visible,
aria-expanded="false"should be set on each
- When the Path Stage Coaching is visible,
aria-expandedshould be set to
aria-selected="true"is used to describe the currently active
slds-path__linkTab, not the Stage the Path is currently set to
- For both with and without Path Stage Coaching variants, the following keyboard navigation applies
rightarrow keys move focus and selection, with
When the Path needs to be placed in a more narrow column on desktop (between 360px and 564px) the class
.slds-region_small should be placed on the container so it can adapt. If the container is between 565px and 1280px, the class
.slds-region_medium should be applied.
Overview of CSS Classes
- The CSS class being referred to.
- A description of what the class does.
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- The selector that the class name is allowed to be used on.
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.